<template>
  <basic-layout 
    title="微信" 
    :show-back="false"
    :show-add="true"
  >
    <van-pull-refresh 
      v-model="refreshing" 
      @refresh="onRefresh"
      class="refresh-container"
      :head-height="80"
      success-text="刷新成功"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :error="error"
        error-text="请求失败，点击重试"
        finished-text="没有更多了"
        @load="onLoad"
        class="chat-list"
      >
        <transition-group name="list">
          <div 
            v-for="chat in chatList" 
            :key="chat.id"
            class="chat-item hover-effect"
            @click="navigateToChat(chat.id)"
          >
            <div class="avatar-wrapper">
              <van-badge 
                :content="chat.unreadCount || ''" 
                :show="chat.unreadCount > 0"
                max="99"
              >
                <van-image
                  round
                  width="50"
                  height="50"
                  :src="chat.avatar"
                >
                  <template #loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template #error>
                    <van-icon name="photo-o" size="20" />
                  </template>
                </van-image>
              </van-badge>
            </div>
            <div class="chat-content">
              <div class="chat-header">
                <span class="chat-name">{{ chat.name }}</span>
                <span class="chat-time">{{ chat.time }}</span>
              </div>
              <div class="chat-message">{{ chat.lastMessage }}</div>
            </div>
          </div>
        </transition-group>
      </van-list>
    </van-pull-refresh>
  </basic-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { getChatList, refreshChatList } from '@/api/chat'
import BasicLayout from '@/components/layout/BasicLayout.vue'

const router = useRouter()
const page = ref(1)
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const chatList = ref<any[]>([])

// 加载更多
const onLoad = async () => {
  try {
    const { list, hasMore } = await getChatList(page.value)
    chatList.value.push(...list)
    loading.value = false
    finished.value = !hasMore
    if (hasMore) {
      page.value += 1
    }
    error.value = false
  } catch (err) {
    loading.value = false
    error.value = true
    Toast('加载失败')
  }
}

// 下拉刷新
const onRefresh = async () => {
  try {
    page.value = 1
    const { list, hasMore } = await refreshChatList()
    chatList.value = list
    finished.value = !hasMore
    refreshing.value = false
    error.value = false
    Toast('刷新成功')
  } catch (err) {
    refreshing.value = false
    error.value = true
    Toast('刷新失败')
  }
}

const navigateToChat = (id: number) => {
  router.push(`/chat/detail/${id}`)
}
</script>

<style lang="less" scoped>
@import '@/styles/common.less';

.refresh-container {
  min-height: calc(100vh - 46px);
}

.chat-list {
  background-color: #fff;
}

.chat-item {
  display: flex;
  padding: 12px 16px;
  background: #fff;
  align-items: center;
  border-bottom: 0.5px solid @border-color;
  transition: all 0.3s ease;

  &:active {
    background-color: #f2f3f5;
  }

  .avatar-wrapper {
    margin-right: 12px;
    position: relative;
  }

  .chat-content {
    flex: 1;
    overflow: hidden;

    .chat-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      line-height: 1.4;

      .chat-name {
        font-size: 16px;
        font-weight: 500;
        color: @text-color;
      }

      .chat-time {
        font-size: 12px;
        color: #999;
      }
    }

    .chat-message {
      font-size: 14px;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.4;
    }
  }
}

// 列表动画
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 下拉刷新样式优化
:deep(.van-pull-refresh) {
  overflow: visible;

  .van-pull-refresh__track {
    overflow: visible;
  }
}

// 加载状态样式优化
:deep(.van-list__loading, .van-list__finished-text, .van-list__error-text) {
  padding: 16px 0;
  color: #999;
  font-size: 14px;
}
</style>